import { Button, DatePicker, Typography, Space } from "antd";
import {
  SearchOutlined,
  AlipayCircleOutlined,
  WechatOutlined,
} from "@ant-design/icons";
import React, { useState } from "react";

const { Text, Link, Paragraph } = Typography;

export default function AntdCom() {
  //声明状态
  const [editableStr, setEditableStr] = useState("This is an editable text.");

  return (
    <div style={{ padding: 20 }}>
      <h2>初体验</h2>
      <DatePicker></DatePicker>
      <h2>Button 组件</h2>
      <Button>Hello Antd</Button>
      <Button type="dashed">Dashed Button</Button>
      <Button type="primary" shape="circle" icon={<SearchOutlined />} />
      <Button type="primary" loading>
        Loading
      </Button>
      <hr />
      <h2>图标</h2>
      <Space size={20}>
        <AlipayCircleOutlined style={{ fontSize: 40, color: "#1890ff" }} />
        <WechatOutlined style={{ fontSize: 40, color: "#22d86f" }} />
      </Space>
      <h2>排版</h2>
      <Text mark>Ant Design (mark)</Text>
      不要<Text delete>998</Text>
      <Paragraph copyable>This is a copyable text.</Paragraph>
      <Paragraph editable={{ onChange: setEditableStr }}>
        {editableStr}
      </Paragraph>
    </div>
  );
}
